<template>
  <div class="detali">
      <!-- 面包屑导航区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>验收管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/record' }">验收记录</el-breadcrumb-item>
      <el-breadcrumb-item>任务详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div class="detail_info">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple"><span>任务编号: </span>{{detailObj.task_id}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple"><span>状态: </span>{{detailObj.status}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple"><span>验收时间: </span>{{detailObj.time_to}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple"><span>验收员: </span>{{detailObj.creator}}</div>
          </el-col>
        </el-row>
      </div>

      <el-divider></el-divider>

      <div class="receipt_detal">
              <el-row :gutter="40">
                  <el-col :span="8">
                      <div class="order_id_erp"><span>采购订单号(ERP) :</span> {{receipt.order_id_erp}}</div>
                  </el-col>
                  <el-col :span="8">
                      <div class="order_id_ec"><span>采购订单号(电商) :</span> {{receipt.order_id_ec}}</div>
                  </el-col>
              </el-row>

              <el-row :gutter="40">
                  <el-col :span="9">
                    <div class="contr_id"><span>协议编号 :</span> {{receipt.contr_id}}</div>
                  </el-col>
              </el-row>

              <el-row :gutter="40">
                  <el-col :span="9">
                      <div class="title"><span>请购单标题 :</span> {{receipt.title}}</div>    
                  </el-col>
              </el-row>

              <el-row :gutter="40">
                  <el-col :span="8">
                      <div class="buy_name"><span>采购商名称 :</span> {{receipt.buy_name}}</div>
                  </el-col>
                  <el-col :span="8">
                      <div class="buy_cont"><span>采购商联系人 :</span> {{receipt.buy_cont}}</div>
                  </el-col>
                  <el-col :span="8">
                      <div class="buy_tel"><span>采购商电话 :</span> {{receipt.buy_tel}}</div>
                  </el-col>
              </el-row>

              <el-row :gutter="40">
                  <el-col :span="8">
                      <div class="sup_name"><span>供应商名称 :</span> {{receipt.sup_name}}</div>
                  </el-col>
                  <el-col :span="8">
                      <div class="sup_cont"><span>供应商联系人 :</span> {{receipt.sup_cont}}</div>
                  </el-col>
                  <el-col :span="8">
                      <div class="sup_tel"><span>供应商电话 :</span> {{receipt.sup_tel}}</div>
                  </el-col>
              </el-row>

              <el-row :gutter="40">
                  <el-col :span="8">
                      <div class="tran_name"><span>承运商名称 :</span> {{receipt.tran_name}}</div>
                  </el-col>
                  <el-col :span="8">
                      <div class="tran_cont"><span>承运商联系人 :</span> {{receipt.tran_cont}}</div>
                  </el-col>
                  <el-col :span="8">
                      <div class="tran_tel"><span>承运商电话 :</span> {{receipt.tran_tel}}</div>
                  </el-col>
              </el-row>

              <el-row :gutter="40">
                  <el-col :span="9">
                      <div class="money"><span>订单总金额 :</span> {{receipt.money}}</div>
                  </el-col>
              </el-row>

              <el-row :gutter="40">
                  <el-col :span="9">
                      <div class="rec_loc"><span>收货地址 :</span> {{receipt.rec_loc}}</div>
                  </el-col>
              </el-row>
      </div> 

      <el-divider>签字图片</el-divider>

      <div class="images_signs">
        <div v-if="isSigns">暂无图片</div>
        <viewer :images="images_signs">
            <img v-for="src in images_signs" :src="$http.defaults.baseURL+src" :key="src" width="195" height="120">
        </viewer>
        
        <a :href="$http.defaults.baseURL+this.pdf" target="view_window">
            <el-button type="primary" icon="el-icon-printer">打印</el-button>
        </a>
        
      </div>

      <el-divider>视频截图</el-divider>

      <div class="images_others">
        <div v-if="isOthers">暂无图片</div>
        <viewer :images="images_others">
            <img v-for="src in images_others" :src="$http.defaults.baseURL+src" :key="src" width="195" height="120">
        </viewer>
      </div>

      <el-divider></el-divider>

      <div class="video-wrap">
        <video autoplay controls :src="this.url"></video>
      </div>
      
    </el-card>
  </div>
</template>

<script>
export default {
  name:'Detail',
  data(){
    return {
      task_id:this.$route.params.id,
      detailObj:{},
      receipt:{},
      // 签字图片
      images_signs:[],
      // 视频截图
      images_others:[],
      // 摄像头视频
      url:'',
      // 打印pdf链接
      pdf:''
    }
  },
  methods:{
     async getDetailList(){
            const {data:res}=await this.$http.get('check/task_particulars/',{params:{task_id:this.$route.params.id}})
            if(res.code !==200) this.$message({type:'error',message:res.message})
            this.detailObj=res.data
            this.receipt=this.detailObj.receipt_id
            // 签字图片
            this.images_signs=this.detailObj.photo_signs.map(item=>{
              return item.img_file
            })
            // 其他图片(视频截图)
            this.images_others=this.detailObj.photo_others.map(item=>{
              return item.img_file
            })
            // 摄像头视频
            if(this.detailObj.video.length && this.detailObj.video.length !==0){
                this.url=this.detailObj.video[0].video_file
            }else{
                this.url=''
            }
      },
      async getPdfUrl(){
            const {data:res}=await this.$http.get('check/task_pdf/',{params:{task_id:this.$route.params.id}})
            if(res.code !==200) this.$message({type:'error',message:res.message})
  
            if(res.data){
                this.pdf=res.data[0].img_file
            }          
      },
  },
  computed:{
      isSigns(){
        if(this.images_signs.length==0){
          return true
        }else{
          return false
        }
      },
      isOthers(){
        if(this.images_others.length==0){
          return true
        }else{
          return false
        }
      }
  },
  created(){
      this.getDetailList()
      this.getPdfUrl()
  }
}

</script>
<style scoped lang="scss">
.detali{
  .detail_info{
    span{
      font-weight: 700;
    }
  }

  .receipt_detal{
      span{
          font-weight: 700;
      }
      .el-row:nth-child(2){
          margin:2%;
      }
      .el-row:nth-child(3){
          margin:2%;
      }
      .el-row:nth-child(4){
          margin:2%;
      }
      .el-row:nth-child(5){
          margin:2%;
      }
      .el-row:nth-child(6){
          margin:2%;
      }
      .el-row:nth-child(7){
          margin:2%;
      }
  }

  .images_signs{
    display: flex;
    align-items: center;
    justify-content: space-between;
    img{
      margin:5px;
    }
  }

  .images_others{
    img{
      margin:5px;
    }
  }

  .buttons{
    display: flex;
    justify-content: space-evenly;
    margin:5%;
  }
}

 .video-wrap { 
  width: 680px;
  height: 390px;
  margin:0 auto;
  margin-bottom: 20px;
}

 .video-wrap video {
  border-radius: 5px;
  height: 100%;
  width: 100%;
  outline: none;
}
</style>